<template>
  <view class="mobile-container" @click.stop="handlePhone">
    <view class="mobile-container__icon">
      <img :src="proxy.$constant.imgServerURL + '/icon_phone.png'" />
    </view>
    <view class="mobile-container__mobile">{{ props.value }}</view>
  </view>
</template>

<script setup>
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
});

const { proxy } = getCurrentInstance()

const handlePhone = () => {
  wx.showActionSheet({
    itemList: ["复制", "拨打电话"],
    success(res) {
      const tapIndex = res.tapIndex; // 用户点击的选项索引
      if (tapIndex === 0) {
        // 复制手机号
        wx.setClipboardData({
          data: props.value,
          success() {
            wx.showToast({
              title: "复制成功",
              icon: "success",
            });
          },
          fail() {
            wx.showModal({
              title: "复制失败",
              content: "请手动长按复制：" + phoneNumber,
              showCancel: false,
            });
          },
        });
      } else if (tapIndex === 1) {
        // 拨打电话
        wx.makePhoneCall({
          phoneNumber: props.value,
          success() {
            console.log("拨号成功");
          },
          fail() {
            wx.showToast({
              title: "拨号失败",
              icon: "none",
            });
          },
        });
      }
    },
    fail() {
      wx.showToast({
        title: "取消",
        icon: "none",
      });
    },
  });
};
</script>

<style lang="scss">
.mobile-container {
  display: flex;
  align-items: center;

  &__icon {
    margin-right: 4px;
      width: 20px;
      height: 20px;

    image {
      width: 100%;
      height: 100%;
      margin: 0 2px;
    }
  }

  &__mobile {
    color: #4c7bfd;
    font-size: 14px;
  }
}
</style>
